<template>
	<view class="container">
		<view class="num">
            新运值：{{count}}
		</view>
		<view class="allMining">
			<view class="miningItem" v-for="item in gameList" @click="tominingDetail(item)">
				<view class="time">
					<u-count-down v-if="item.status==3" :timestamp="timestamp"></u-count-down>
					<view class="white" v-if="item.status==2">{{item.time}}</view>
				</view>
				<view class="miningName">
					<image src="../../static/my/miningBg.png" mode="widthFix"></image>
					{{item.name}}
				</view>
				<view class="flex miningCont">
					<view class="">
						<view class="miningNum"><text style="font-size: 36rpx;font-weight: bold;">{{item.text}}</text></view>
						<!-- <view class="labelBox">
							<view class="labelItem">矿标签内容</view>
							<view class="labelItem">矿标签内容</view>
						</view> -->
					</view>
					<image :src="item.image" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 40532,
				// miningList:[
				// 	{name:'xxx矿',num: 25,img:'',time:'11:15:32',id:29},
				// 	{name:'xxx矿',num: 25,img:'',time:'11:15:32',id:29},
				// ],
				page: 1,
				gameList:[],
				count:''
			}
		},
		onLoad() {
			this.init()
			// document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[1].querySelector('.uni-btn-icon').innerText='按钮文本';
			

		},
		
		methods: {
			// 游戏列表
			init(){
				this.$http('api/forge_task/taskList',{
					page: this.page
				}).then(res => {
					this.gameList=res.task
					this.count=res.user_count
					if(this.gameList.length==0){
						this.count=0
					}
					if(res.user_count==null){
						this.count=0
					}
				});
				
			},
			tominingDetail(item){
				if(item.status==1){
					uni.navigateTo({
						url:'./miningDetail?id='+item.id+'&name='+item.name
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="less">
.container{
	width: 100%;
	position: relative;
	.num{
		position: absolute;
		top: -50px;
		z-index: 9999;
		right: 20px;
		color: #000;
		font-weight: bold;
	}
	.allMining{
		margin-top: 40rpx;
		width: 94%;
		margin: 40rpx auto 0;
		
		.miningItem{
			width: 100%;
			margin-bottom: 30rpx;
			box-shadow: rgb(223, 223, 223) 0rpx 8rpx 20rpx 5rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			position: relative;
			.time{
				border-radius: 0rpx 20rpx 0 20rpx;
				position: absolute;
				right: 0;
				top: 0rpx;
				background: linear-gradient(to right,#FFB612,#FFA012);
				padding: 0rpx 14rpx;
				::v-deep  .u-countdown-colon{
					color: #fff !important;
				}
				::v-deep  .u-countdown-item{
					background-color: transparent !important;
					
				}
				::v-deep  .u-countdown-time{
					color: #fff !important;
					font-size: 20rpx !important;
				}
			}
			.miningName{
				display: flex;
				justify-content: flex-start;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				image{
					width: 12rpx;
					position: relative;
					left: -30rpx;
				}
			}
			.miningCont{
				// padding: 0 40rpx;
				image{
					width: 120rpx;
					width: 120rpx;
				}
				.miningNum{
					display: flex;
					justify-content: flex-start;
					margin: 10rpx 0;
					align-items: center;
					font-size: 20rpx;
				}
				.labelBox{
					display: flex;
					flex-wrap: wrap;
					
					.labelItem{
						border: 1rpx solid #CCCCCC;
						font-size: 20rpx;
						color: #666666;
						padding: 6rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	
}
</style>
